CSS Border-Spacing Property
This CSS property is used to set the spacing between the borders of adjacent cells in a table. It only applies when the border-collapse property is set to separate. If border-collapse is set to collapse, there will be no space between the borders.
It can be defined using a pair of values to determine the vertical and horizontal spacing.
When only one value is specified, it sets both the horizontal and vertical spacing.
When using the two-value syntax, the first value sets the horizontal spacing (the space between adjacent columns), and the second value sets the vertical spacing (the space between adjacent rows).
Syntax
border-spacing: 10px 20px; /* Example of setting horizontal and vertical spacing */
border-spacing: initial; /* Resets the border-spacing to its default value */
border-spacing: inherit; /* Inherits the border-spacing value from its parent element */
Property Values
The values for this CSS property are explained as follows.
length: Specifies the distance between borders using units like pixels, centimeters, points, etc. Negative values are not allowed.
initial: Resets the property to its default value.
inherit: Inherits the property value from its parent element.
Let's explore this CSS property with examples. In the first example, we'll use a single value for the border-spacing property, while in the second example, we'll use two values for it.
Single Value Example
In this example, the border-spacing is set to 45 pixels, creating equal horizontal and vertical spacing between the table cells. Adjust the value based on your design preferences. This example demonstrates how the border-spacing property can enhance the visual presentation of tables. Modify the values according to your specific design needs.
Example
<!DOCTYPE html>
<html>
<head>
<title>Border Spacing Property</title>
<style>
table {
border: 2px solid red;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th {
border: 5px solid blue;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#space {
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>
<body>
<h1>The `border-spacing` Property</h1>
<h2>border-spacing: 45px;</h2>
<table id="space">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Twi</td>
<td>Light</td>
<td>Maths</td>
<td>93</td>
</tr>
<tr>
<td>Yor</td>
<td>Rickman</td>
<td>Maths</td>
<td>88</td>
</tr>
<tr>
<td>Anya</td>
<td>Mendes</td>
<td>Maths</td>
<td>84</td>
</tr>
</table>
</body>
</html>
Output
Two Values Example
In this example, we use two values for the border-spacing property. With border-collapse set to separate, the border-spacing value is 20pt 1em. The first value, 20pt, defines the horizontal spacing, while the second value, 1em, sets the vertical spacing. This demonstrates how the border-spacing property can enhance the appearance of tables. Adjust these values according to your design needs.
Example
<!DOCTYPE html>
<html>
<head>
<title>Border Spacing Property</title>
<style>
table {
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th {
border: 5px solid red;
background-color: yellow;
}
td {
border: 5px solid violet;
background-color: cyan;
}
#space {
border-collapse: separate;
border-spacing: 20pt 1em;
}
</style>
</head>
<body>
<h1>The Border Spacing Property</h1>
<h2>border-spacing: 20pt 1em;</h2>
<table id="space">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>James</td>
<td>Gosling</td>
<td>Maths</td>
<td>92</td>
</tr>
<tr>
<td>Alan</td>
<td>Rickman</td>
<td>Maths</td>
<td>89</td>
</tr>
<tr>
<td>Sam</td>
<td>Mendes</td>
<td>Maths</td>
<td>82</td>
</tr>
</table>
</body>
</html>
Output
Browser Compatibility
The border-spacing property is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s a good idea to check compatibility on specific platforms to ensure a consistent user experience across different browsers.
Conclusion
In conclusion, the CSS border-spacing property is valuable for managing the space between the borders of adjacent table cells. By using a single value for uniform spacing or two values for specific horizontal and vertical spacings, you can enhance the visual appeal of tables on a website. Understanding its syntax, property values, and practical examples allows designers to precisely adjust the layout and presentation of tabular data.
